<template>
  <div class="login_box h-full w-full flex-center">
    <div class="login_form flex-column">
      <FormTpl
        ref="formTpl"
        :rules="rules"
        :label-width="labelWidth"
        :form-data="formData"
        :render-list="renderList"
      />
      <div slot="footer" class="login_btn">
        <el-button type="primary" size="medium" @click="handleClick">
          登录
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import Base from '@/services/base'
export default {
  data () {
    this.renderList = [
      {
        label: '用户名',
        type: 'input',
        value: '',
        span: 24,
        prop: 'userName',
        placeholder: '请输入用户名'
      },
      {
        label: '密码',
        type: 'input',
        value: '',
        span: 24,
        prop: 'password',
        showPassword: true,
        placeholder: '请输入密码'
      }
    ]
    this.rules = {
      userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
      ]
    }
    return {
      labelWidth: '70px',
      formData: {
        userName: '',
        password: ''
      }
    }
  },
  methods: {
    handleClick () {
      this.$refs.formTpl.validate().then(() => {
        Base.login(this.formData).then(async res => {
          const userInfo = res
          await this.$store.dispatch('user/loginSuccess', userInfo)
          this.$router.replace('/')
        }).catch(err => {
          this.$store.commit('user/LOGIN_ERROR')
          console.log('page login', err)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login_box{
  background: var(--color-theme);
  background: rgb(0, 0, 64);
  justify-content: center;
  .login_form{
    width: 400px;
    height: 400px;
    background: yellow;
    box-sizing: border-box;
    padding: 0 40px 0 20px;
    justify-content: center;
    align-items: center
  }
}
</style>


